<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script>
    function textPostXhr(url) {
      var formData = new FormData();
      var myBlob = new Blob(["This is my blob content"], {type : "text/plain"});
      formData.append("upload", myBlob);
      var xhr = new XMLHttpRequest();
      xhr.open('POST', url, true);
      xhr.send(formData);
      xhr.onreadystatechange = function (err) {
        console.log(err.target.status);
      }
    }
    function textPutXhr(url) {
      var formData = new FormData();
      var myBlob = new Blob(["This is my blob content"], {type : "text/plain"});
      formData.append("upload", myBlob);
      var xhr = new XMLHttpRequest();
      xhr.open('PUT', url, true);
      xhr.send(formData);
      xhr.onreadystatechange = function (err) {
        console.log(err.target.status);
      }
    }
  </script>
</head>
<body>
<div onclick="textPostXhr('https://www.example.com/xhr')">test xhr post</div>
<div onclick="textPutXhr('https://www.example.com/xhr')">test xhr put</div>
</body>
</html>